<template>
  <div class="service_info">
    <van-nav-bar
      title="我的快递"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        class="dynamic-list-style"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ul>
          <li v-for="o in contentList" :key="o.id" class="record_list">
            <p class="record_title">{{ o.serviceName }}</p>
            <p class="record_address">快递单号：{{ o.orderCode }}</p>
            <p class="record_address">办理日期：{{ o.creationDate }}</p>
            <svg-icon
              @click.native="handleDelete(o)"
              class="delete_icon"
              icon-class="我的快递-删除"
              widthW="1.2em"
              heightH="1.2em"
            />
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
    <van-popup v-model="showLoading">
      <van-loading color="#DC4630" />
    </van-popup>
  </div>
</template>

<script>
import api from "@/controller/govService.js";
import constant from "@/controller/constant.js";
import { Dialog } from "vant";
export default {
  data() {
    return {
      loading: false,
      finished: false,
      isLoading: false,
      curPage: 1,
      pageSize: 10,
      showLoading: false,
      contentList: []
    };
  },
  mounted() {},
  methods: {
    onRefresh() {
      this.contentList = [];
      setTimeout(() => {
        this.curPage = 1;
        this.pageSize = 10;
        this.getMyExpress({});
        this.isLoading = false;
      }, 500);
    },
    getMyExpress(data) {
      api
        .express_delivery_v1_find_own(this.pageSize, this.curPage, data)
        .then(res => {
          if (res.code === "0") {
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              this.$toast("暂无更多数据");
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return;
            }
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            });
            this.contentList = [...this.contentList, ...res.datas.records];
            this.curPage = this.curPage + 1;
            if (res.datas.records.length < this.pageSize) {
              this.finished = true;
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        });
    },
    onLoad() {
      this.getMyExpress({});
    },
    handleDeleteById(id) {
      api.express_delivery_v1_delete(id).then(res => {
        if (res.code === "0") {
          this.$toast("删除成功");
          this.contentList = [];
          this.curPage = 1;
          this.pageSize = 10;
          this.getMyExpress({});
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    handleDelete(val) {
      Dialog.confirm({
        title: "提示",
        message: `确认删除当前快递信息？`
      })
        .then(() => {
          this.handleDeleteById(val.id);
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.service_info {
  background: #ffffff;
  height: 100%;

  .record_list {
    padding: 0 15px 9px;
    border-bottom: 1px solid rgba(226, 226, 226, 0.5);
    position: relative;
    .delete_icon {
      position: absolute;
      right: 15px;
      top: 15px;
    }
  }

  .record_title {
    font-size: 16px;
    color: #333333;
    line-height: 24px;
    padding: 15px 0 10px 0;
  }

  .record_address {
    font-size: 12px;
    color: #666666;
    line-height: 16.5px;
    padding: 0 0 6px 0;
  }
}
</style>
